<template>
  <div id="emp">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 请假管理</span>
    </div>
    <!-- 查询、添加请假以及表格 -->
    <div class="empInner">
      <!-- 查询请假列表 -->
      <div class="addEmp">
        <div class="name">
          <span>申请人:</span>
          <el-input
            v-model="select.userInfo.userName"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="dept">
          <span>请假事项:</span>
          <el-select v-model="select.holiday.holidayType" placeholder="请选择">
            <el-option
              v-for="item in holidayType"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dept">
          <span>申请状态:</span>
          <el-select
            v-model="select.holiday.holidayStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in holidayStatus"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <el-button @click="queryHoli" type="primary">查询</el-button>
      </div>
      <!-- 添加请假 -->
      <div class="newemp" @click="addHolidayFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加请假</span>
      </div>
      <!-- 表格信息 -->
      <div class="table">
        <template>
          <el-table :data="tableData" height="700" border style="width: 100%">
            <el-table-column
              prop="Holiday.holidayNo"
              label="申请编号"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="UserInfo.userName"
              label="申请人"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="Holiday.holidayType"
              label="请假类型"
              width="85"
            >
            </el-table-column>
            <el-table-column
              prop="Holiday.holidayBz"
              label="请假事由"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="Holiday.holidayStartTime"
              label="开始时间"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="Holiday.holidayEndTime"
              label="结束时间"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="Holiday.holidayStatus"
              label="申请状态"
              width="180"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.Holiday.holidayStatus == 2">提交</span>
                <span v-else>草稿</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="Holiday.holidayCreateTime"
              label="提交时间"
              width="180"
            >
            </el-table-column>
            <el-table-column label="操作列表" width="200">
              <template slot-scope="scope">
                <div class="tableBtn">
                  <!-- 删除按钮 -->
                  <el-popconfirm
                    title="确定删除此员工吗？"
                    @confirm="deleteHoliday(scope.$index)"
                  >
                    <el-button
                      slot="reference"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </el-popconfirm>
                  <!-- 修改按钮 -->
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    @click="clickEdit(scope.$index)"
                  ></el-button>
                  <!-- 查看详情按钮 -->
                  <el-button icon="el-icon-search" circle></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-pagination
        :current-page.sync="assignGroupSearch.pageNo"
        :page-size="assignGroupSearch.rows"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="assignGroupSearch.total"
        @size-change="(e) => tableSizeChange(e)"
        @current-change="(e) => tableCurrentChange(e)"
      >
      </el-pagination>
      <!-- 添加表格弹窗 -->
      <div class="addForm">
        <el-dialog
          title="请假新增"
          width="650px"
          :visible.sync="addHolidayFormVisible"
        >
          <!-- 请假编号 -->
          <div class="empId">
            <span>请假编号</span>
            <el-input
              v-model="addHoliday.holiday.holidayNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工姓名 -->
          <div class="empId">
            <span>员工姓名</span>
            <el-input
              v-model="addHoliday.userInfo.userName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 请假类型 -->
          <div class="empId">
            <span>请假类型</span>
            <el-select
              v-model="addHoliday.holiday.holidayType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in holidayType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 请假事由 -->
          <div class="empId">
            <span>请假事由</span>
            <el-input
              type="textarea"
              v-model="addHoliday.holiday.holidayBz"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 开始时间 -->
          <div class="empPrin">
            <span>开始时间</span>
            <el-date-picker
              v-model="addHoliday.holiday.holidayStartTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <!-- 结束时间 -->
          <div class="empId">
            <span>结束时间</span>
            <el-date-picker
              v-model="addHoliday.holiday.holidayEndTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="addHolidayFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="newHoliday()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 修改请假弹窗 -->
      <div class="addForm">
        <el-dialog
          title="请假修改"
          width="650px"
          :visible.sync="editHolidayFormVisible"
        >
          <!-- 请假编号 -->
          <div class="empId">
            <span>请假编号</span>
            <el-input
              v-model="editHoliday.Holiday.holidayNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工姓名 -->
          <div class="empId">
            <span>员工姓名</span>
            <el-input
              v-model="editHoliday.UserInfo.userName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 请假类型 -->
          <div class="empId">
            <span>请假类型</span>
            <el-select
              v-model="editHoliday.Holiday.holidayType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in holidayType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 请假事由 -->
          <div class="empId">
            <span>请假事由</span>
            <el-input
              type="textarea"
              v-model="editHoliday.Holiday.holidayBz"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 开始时间 -->
          <div class="empPrin">
            <span>开始时间</span>
            <el-date-picker
              v-model="editHoliday.Holiday.holidayStartTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <!-- 结束时间 -->
          <div class="empId">
            <span>结束时间</span>
            <el-date-picker
              v-model="editHoliday.Holiday.holidayEndTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="editHolidayFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="Edit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>


<script>
import {
  getHoliday,
  addHoli,
  likeHoli,
  deleteHoli,
  editHoli,
} from "@/api/holidayAPI";
export default {
  name: "holidayManager",
  data() {
    return {
      // 头部模糊查询信息
      select: {
        userInfo: {
          userName: "",
        },
        holiday: {
          holidayType: "",
          holidayStatus: "",
        },
      },
      // 表格数据
      tableData: [
        {
          Holiday: {
            holidayId: "",
            holidayNo: "",
            HolidayType: "",
            holidayBz: "",
            holidayStartTime: "",
            holidayEndTime: "",
            holidayStatus: "",
            holidayCreateTime: "",
          },
          UserInfo: {
            userName: "",
          },
        },
      ],
      // 请假类型
      holidayType: ["事假", "婚假", "年假", "调休", "病假", "丧假"],
      // 申请状态
      holidayStatus: ["草稿", "提交"],
      // 添加假期信息
      addHoliday: {
        holiday: {
          holidayNo: "",
          HolidayType: "",
          holidayBz: "",
          holidayStartTime: "",
          holidayEndTime: "",
          holidayStatus: "1",
        },
        userInfo: {
          userName: "",
        },
      },
      addHolidayFormVisible: false,
      // 修改请假数据
      editHoliday: {
        Holiday: {
          holidayId: "",
          holidayNo: "",
          holidayType: "",
          holidayBz: "",
          holidayStartTime: "",
          holidayEndTime: "",
          holidayStatus: "1",
        },
        UserInfo: {
          userName: "",
        },
      },
      editHolidayFormVisible: false,
      detailList: [],
      assignGroupSearch: {
        pageNo: 1, // 页数
        rows: 10, // 每页展示条数
        total: 0, // 总数
      },
    };
  },
  methods: {
    // 获得请假信息
    getHolidayByPage: function () {
      getHoliday().then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.assignGroupSearch.total = res.data.length;
        }
      });
    },
    // 添加请假信息
    newHoliday: function () {
      addHoli(this.addHoliday).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addHolidayFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 模糊查询请假信息
    queryHoli: function () {
      if (
        this.select.userInfo.userName == "" &&
        this.select.holiday.holidayType == "" &&
        this.select.holiday.holidayStatus == ""
      ) {
        this.getHolidayByPage(0);
      }
      if (this.select.holiday.holidayStatus == "草稿") {
        this.select.holiday.holidayStatus = 1;
      } else {
        this.select.holiday.holidayStatus = 2;
      }
      likeHoli(this.select).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    // 删除请假信息
    deleteHoliday: function (index) {
      deleteHoli(this.tableData[index].Holiday.holidayId).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.tableData.splice(index, 1);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 点击修改按钮
    clickEdit: function (index) {
      this.editHoliday = JSON.parse(JSON.stringify(this.tableData[index]));
      this.editHolidayFormVisible = true;
    },
    Edit: function () {
      editHoli(this.editHoliday.Holiday, this.editHoliday.UserInfo).then(
        (res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.editHolidayFormVisible = false;
            this.getHolidayByPage(0);
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        }
      );
    },
    // 跳页
    tableCurrentChange(e) {
      this.assignGroupSearch.pageNo = e;
      this.getHolidayByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice((e - 1) * 10, e * 10);
      }, 500);
    },
    // 每页展示条数变更
    tableSizeChange(e) {
      this.assignGroupSearch.rows = e;
      this.assignGroupSearch.pageNo = 1;
      this.getHolidayByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice(0, 10);
      }, 500);
    },
  },
  mounted() {
    this.getHolidayByPage();
    setTimeout(() => {
      this.tableData = this.detailList.slice(0, 10);
    }, 500);
  },
};
</script>

<style lang="less" scoped>
#emp {
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  // 内容
  .empInner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
    .addEmp {
      display: flex;
      flex-direction: row;
      justify-content: start;
      .name,
      .dept {
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
      }

      .el-input {
        width: 200px;
      }
    }
    .newemp {
      margin-top: 20px;
      width: 90px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 2px;
      }
    }
    .table {
      height: 700px;
      margin-top: 20px;
      ::v-deep .el-table th {
        background-color: bisque;
      }
      ::v-deep .el-table__cell {
        border: 3px double gray;
      }
      ::v-deep .el-table__cell.gutter {
        background-color: white;
        border: none;
      }
      .tableBtn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    .addForm {
      display: flex;
      flex-direction: column;
      .el-input,
      .el-textarea {
        width: 496px;
      }
      .empId,
      .empPrin {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input,
        .el-select,
        .el-textarea {
          margin-left: 30px;
        }
      }
    }
  }
}
</style>